/*
  学习目标：编程式导航-通过JS跳转路由
  语法： props.history操作路由跳转
  常用： 1. push("/路径")  2. go(数字) 3. goBack()回退
  注意： 只有Route组件设置过匹配规则的组件才有history对象，普通组件没有history

*/
import React, { Component } from 'react';
import './index.css';
import { BrowserRouter as Router, Route, Link, NavLink, Switch, Redirect } from 'react-router-dom';
export default class App extends Component {
  render() {
    return (
      <Router>
        <NavLink to="/home/123" activeClassName="xxx" exact>
          点我调到首页
        </NavLink>
        <br />
        <NavLink to="/my">点我调到我的</NavLink>
        <br />
        <NavLink to="/friend">点我调到朋友</NavLink>
        <div>
          <Switch>
            <Redirect path="/" to="/home" exact></Redirect>
            <Route path="/home" component={Home}></Route>
            <Route path="/my" component={MyMusic}></Route>
            <Route path="/friend" component={Friend}></Route>
            <Route component={NotFound}></Route>
          </Switch>
          <Header></Header>
        </div>
      </Router>
    );
  }
}

function Friend() {
  return (
    <div>
      <h1>我是朋友组件</h1>
      <Link to="/friend">调到朋友1</Link>
      <Link to="/friend/friend2">调到朋友2</Link>
      <Link to="/friend/friend3">调到朋友3</Link>
      <Switch>
        <Route path="/friend" component={Friend1} exact></Route>
        <Route path="/friend/friend2" component={Friend2}></Route>
        <Route path="/friend/friend3" component={Friend3}></Route>
      </Switch>
    </div>
  );
}

function Header(params) {
  return <h1>Header</h1>;
}

function NotFound() {
  return <div>404页面</div>;
}

class Home extends React.Component {
  handleClick = () => {
    this.props.history.push('/my');
    this.props.history.go(1);
  };

  render() {
    return (
      <>
        <h1>我是首页组件</h1>
        <button onClick={this.handleClick}>点我跳转</button>
      </>
    );
  }
}

function MyMusic({ history }) {
  return (
    <h1>
      我是我的音乐件{' '}
      <button
        onClick={() => {
          // history.go(-1);
          history.goBack();
        }}
      >
        点我后退
      </button>
    </h1>
  );
}

function Friend1() {
  return <i>我是朋友组件1</i>;
}
function Friend2() {
  return <i>我是朋友组件2</i>;
}
function Friend3() {
  return <i>我是朋友组件3</i>;
}
